/*
 *  Copyright 2024 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
@import (reference) '../../../styles/variables.less';

.owner-pills-content {
  gap: 6px;
  border: 1px solid @grey-4;
  border-radius: 20px;
  padding: 4px 8px 4px 6px;
  display: inline-flex;

  a {
    font-size: 12px;
    color: @text-color;
  }

  &.inherited {
    background-color: @blue-6;
    border-color: @primary-color;
    .inherit-icon {
      color: @primary-color;
    }
  }
}

.ant-btn.more-owners-button {
  background-color: @primary-button-background !important;
  border-radius: 200px;
  text-align: center;
  text-decoration: none;
  margin-left: -4px;
  border: 1px solid @blue-24 !important;
  color: @primary-7;
}
.extra-avatar {
  background-color: #f9f5ff;
  color: #7f56d9;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
}

.owner-avatar-container {
  box-sizing: border-box;
  .owner-avatar-icon {
    border-radius: 50%;
    transition: transform 0.2s;
    &:hover {
      transform: translateY(-2px);
      z-index: 1;
    }
  }

  &.stacked-view {
    position: relative;
  }

  &.is-compact-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
}

.owner-dropdown-container {
  background-color: @background-color;
  position: absolute;
  width: 200px;
  border-radius: 8px;
  border: 1px solid @border-color;
  max-height: 250px;
  overflow-y: auto;
}

.ant-typography.no-owner-heading {
  color: @primary-heading-color;
}

.owner-count-avatar {
  background: #f9f5ff !important;
  color: #7f56d9 !important;
  border: 1px solid #7f56d9 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.owner-avatar-group {
  .ant-avatar {
    border: 2px solid @white;
    margin-inline-end: -8px !important;
  }
}

.ant-avatar-group {
  .ant-avatar:last-child {
    margin-inline-end: 0 !important;
  }
}

.no-underline {
  text-decoration: none !important;

  &:hover {
    text-decoration: none !important;
  }
}

.avatar-group {
  .avatar-overlap {
    margin-left: -8px;

    &:first-child {
      margin-left: 0;
    }
  }
}
